
//左侧导航栏

var sub = $(".sort .sub");
var activeRow;
var activeMenu;

$(".sort").on("mouseenter", function () {
    sub.removeClass("none");
}).on("mouseleave", function (e) {
    sub.addClass("none");
    if (activeRow) {
        activeRow.removeClass("active");
        activeRow = null;
    }
    if (activeMenu) {
        activeMenu.addClass("none");
        activeMenu = null;
    }
}).on("mouseenter", ".sortlist li", function () {
    if (activeRow) {
        activeRow.removeClass("active")
        activeMenu.addClass("none");
    }

    activeRow = $(this)
    activeRow.addClass("active")
    activeMenu = $("#" + activeRow.data("id"));
    activeMenu.removeClass("none");
})



// 放大镜的构造函数
function Magnifier() {
    this.init();
    this.bindEvent();
}
// 选择元素
Magnifier.prototype.init = function () {
    // 小盒子元素
    this.small_box_ele = document.querySelector(".small-box");
    // 黄色遮罩层元素
    this.mask_box_ele = document.querySelector(".mask-box");
    // 大盒子元素;
    this.big_box_ele = document.querySelector(".big-box");
    // 容器元素;
    this.container = document.querySelector(".container");
    // 大图的图片;
    this.big_box_img_ele = document.querySelector(".big-box img");


     // this.mask_box_ele_width = parseInt(getComputedStyle(this.mask_box_ele).width) / 2;
    // this.mask_box_ele_height = parseInt(getComputedStyle(this.mask_box_ele).height) / 2;
    // 遮罩小盒子的宽度
    this.mw = parseInt(getComputedStyle(this.mask_box_ele).width);
     // 遮罩小盒子的高度
     this.mh = parseInt(getComputedStyle(this.mask_box_ele).height);

    // 容器的左侧偏移距离;
    this.cl = this.container.getBoundingClientRect().left;
    // 容器的顶部偏移距离 ;
    this.ct = this.container.getBoundingClientRect().top;
    // 获取边界最大值;
    this.max_left = this.small_box_ele.offsetWidth - this.mw;
    this.max_top = this.small_box_ele.offsetHeight - this.mh;
}
// 绑定事件
Magnifier.prototype.bindEvent = function () {
    // 鼠标移上小盒子
    this.small_box_ele.onmouseenter = function () {
        // this => 小盒子元素;
        // this => 实例
        this.show();
    }.bind(this)
    // 鼠标移出小盒子
    this.small_box_ele.onmouseleave = function () {
        // this => 小盒子元素;
        // this => 实例
        this.hide();
    }.bind(this);
    this.small_box_ele.onmousemove = function (evt) {
        // 获取事件的信息;
        var e = evt || event;
        this.follow(e);
        this.bigMove();
    }.bind(this)
}
// 图片显示
Magnifier.prototype.show = function () {
    // 显示黄色盒子;
    // 显示大图;
    this.mask_box_ele.style.display = "block";
    this.big_box_ele.style.display = "block";
}
// 图片隐藏
Magnifier.prototype.hide = function () {
    this.mask_box_ele.style.display = "none";
    this.big_box_ele.style.display = "none";
}
// 黄色框隐藏   // 代码优化 : 因为 元素的属性很多都是不会发生改变的，所以我们在初始化的时候统一获取一次,不至于高频率的调用offset系列方法可以节省性能;
Magnifier.prototype.follow = function (e) {

    var scrolltop = document.body.scrollTop || document.documentElement.scrollTop;
    var a = clientY - this.container.offsetTop;

    var clientX = e.clientX;
    var clientY = e.clientY;
     // 计算元素的left值;
     var _left = clientX - this.cl - this.mw / 2;
     // 计算元素的top值;
     var _top = clientY - this.ct - this.mh / 2;

    
     _left = _left <= 0 ? 0 : _left;
     _top = _top <= 0 ? 0 : _top;

     _left = _left >= this.max_left ? this.max_left : _left;
     _top = _top >= this.max_top ? this.max_top : _top;


    // this.mask_box_ele.style.left = clientX - this.container.getBoundingClientRect().left - this.mask_box_ele_width + "px";
    // this.mask_box_ele.style.top = clientY - this.container.getBoundingClientRect().top - this.mask_box_ele_height + "px";
    this.mask_box_ele.style.left = _left + "px"; 
    this.mask_box_ele.style.top  = _top + "px";

    // 比例计算 :
    // left值的比例 
    this.prop_left = _left / this.max_left; // 要在大图移动（bigMove）中用
    // top值的比例
    this.prop_top = _top / this.max_top;
}
// 大图移动
Magnifier.prototype.bigMove = function () {
    this.big_box_img_ele.style.left = -this.prop_left * 100 + "%";
    this.big_box_img_ele.style.top = -this.prop_top * 100 + "%";
}

var mag = new Magnifier();
console.log(mag)
